<template>
	<div class="scrollview">
		<div class="left" @click="doScroll('left')">
			<img src="../assets/组 203@2x.png" alt="" />
		</div>
		<div class="center" ref="center">
			<slot></slot>
		</div>
		<div class="right" @click="doScroll('right')">
			<img src="../assets/组 225@2x.png" alt="" />
		</div>
	</div>
</template>

<script>
export default {
	props: {
		distance: Number,
	},
	data() {
		return {

		}
	},
	methods: {
		doScroll(dir) {
			const dom = this.$refs.center
			const { distance = 300 } = this
			dom.scrollLeft = dir === 'right' ? dom.scrollLeft + distance : dom.scrollLeft - distance
			this.$emit('scroll', dir)
		},
		reset() {
			const dom = this.$refs.center
			dom.scrollLeft = 0
		}
	}
}
</script>


<style scoped lang="less">
.scrollview {
	width: 100%;
	display: flex;
	align-items: center;
	.left,
	.right {
		width: 100px;
		cursor: pointer;
		:active {
			opacity: 0.7;
		}
	}
	.center {
		width: calc(100% - 200px);
		overflow: auto;
		scroll-behavior: smooth;
		.content {
			width: 10000px;
			height: 300px;
			background: white;
			color: black;
		}
	}
}
</style>
